{% extends 'layout.html' %}

{% block content %}
    <div>
        <input type="button" id="btnAdd" value="新建订单" class="btn btn-primary">
        <!-- 新建订单(对话框) -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="">新建订单</h4>
                    </div>
                    <div class="modal-body">
                        <form id="formAdd">
                            {% for field in form %}
                                <div class="form-group col-xs-12" style="position: relative;margin-bottom: 24px">
                                    <label>{{ field.label }}</label>
                                    {{ field }}
                                    <span class="error_msg"
                                          style="color: red;position: absolute">{{ field.errors.0 }}</span>
                                </div>
                            {% endfor %}

                        </form>
                    </div>
                    <div class="modal-footer" style="border-top: none">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="btnSave">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新建订单(对话框) end-->


        <!-- 删除(对话框) -->
        <div class="modal fade" id="deModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="alert alert-danger alert-dismissible fade in" role="alert" id="" tabindex="-1">
                    <h4>是否确定删除？</h4>
                    <p>删除后，所有关联的相关数据都会被删除！</p>
                    <p>
                        <button id="btnConfirmDelete" type="button" class="btn btn-danger">确定</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </p>
                </div>
            </div>
        </div>
        <!-- 删除(对话框) end-->


        <div class="panel panel-default" style="margin-top: 10px">
            <div class="panel-heading"><span class="glyphicon glyphicon-list"></span> 部门列表</div>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>订单号</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>状态</th>
                    <th>管理员</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for obj in order_list %}
                    <tr>
                        <td>{{ obj.id }}</td>
                        <td>{{ obj.oid }}</td>
                        <td>{{ obj.titleo }}</td>
                        <td>{{ obj.price }}</td>
                        <td>{{ obj.get_status_display }}</td>
                        <td>{{ obj.admin.username }}</td>
                        <td>
                            <button type="button" class="btn btn-primary btn-xs btn-editor" uid="{{ obj.id }}">编辑
                            </button>
                            <button type="button" class="btn btn-danger btn-xs btn-delete" uid="{{ obj.id }}">删除
                            </button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <ul class="pagination">
            {{ page_string }}
        </ul>
    </div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        var DELETE_ID;
        var EDIT_ID;

        $(function () {
            bindBtnAdd()
            bindBtnSave()
            bindBtnDelete()
            bindBtnConfirmDelete()
            binBtnEdit()
        })


        function binBtnEdit() {
            $(".btn-editor").click(function () {
                // 清空对话框中的数据
                $("#formAdd")[0].reset()
                let uid = $(this).attr("uid");
                EDIT_ID = uid;
                // 获取当前行的ID并赋值给全局变量
                // DELETE_ID = $(this).attr("uid")
                $.ajax({
                    url: "/order/detail/",      // => /order/detail/?uid=123
                    type: "GET",
                    data: {
                        uid: uid
                    },
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            console.log(res.data)
                            // 将数据赋值到对话框中的标签中
                            $.each(res.data, function (name, value) {
                                console.log(name, value)
                                $('#id_' + name).val(value)
                            })
                            $("#myModal").modal("show");
                            $(".modal-title").text("编辑订单")

                        } else {
                            console.log("失败")
                        }
                    }
                })
            })
        }


        function bindBtnAdd() {
            $("#btnAdd").click(function () {
                // 将正在编辑的ID设置为空
                EDIT_ID = undefined;

                // 清空对话框中的数据
                $("#formAdd")[0].reset()
                $("#myModal").modal("show")
                $(".modal-title").text("新建订单")
            })
        }


        function bindBtnSave() {
            $("#btnSave").click(function () {
                // 清除错误信息
                $(".error_msg").empty()

                if (EDIT_ID) {
                    // 编辑
                    doEdit()
                } else {
                    // 添加
                    doAdd()
                }

                // 向后台发送请求(添加的Ajax请求)

            })
        }

        function doEdit() {
            $.ajax({
                url: "/order/edit/" + "?uid=" + EDIT_ID,    //  --> /order/edit/?uid=456
                type: "post",
                data: $("#formAdd").serialize(),
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        // 清空表单 $("#formAdd")是jquery对象，$("#formAdd")[0]是dom对象
                        $("#formAdd")[0].reset()
                        // 关闭对话框
                        $("#myModal").modal("hide")
                        location.reload()
                    } else {
                        if (res.tips) {
                            alert(res.tips)
                        } else {
                            // 失败
                            $.each(res.error, function (name, errorList) {
                                $("#id_" + name).next().text(errorList[0])
                            })
                        }

                    }
                }
            })
        }

        function doAdd() {
            $.ajax({
                url: "/order/add/",
                type: "post",
                data: $("#formAdd").serialize(),
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        // 成功
                        console.log("创建成功")
                        // 清空表单 $("#formAdd")是jquery对象，$("#formAdd")[0]是dom对象
                        $("#formAdd")[0].reset()
                        // 关闭对话框
                        $("#myModal").modal("hide")
                        location.reload()
                    } else {
                        // 失败
                        $.each(res.error, function (name, errorList) {
                            $("#id_" + name).next().text(errorList[0])
                        })
                    }
                }
            })
        }

        function bindBtnDelete() {
            $(".btn-delete").click(function () {
                $("#deModal").modal("show")
                // 获取当前行的ID并赋值给全局变量
                DELETE_ID = $(this).attr("uid")
            })
        }


        function bindBtnConfirmDelete() {
            $("#btnConfirmDelete").click(function () {
                // 点击确认删除按钮，将全局变量中设置的那个要删除ID发送到后台
                $.ajax({
                    url: "/order/delete/",   // => /order/delete/?uid=123
                    type: "GET",
                    data: {
                        uid: DELETE_ID
                    },
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            // 删除成功
                            alert("删除成功！")
                            $("#deModal").modal("hide")
                            // 要删除的ID置空
                            DELETE_ID = 0;

                            location.reload()
                        } else {
                            // 删除失败
                            alert(res.error);
                        }
                    }
                })
            })


        }
    </script>
{% endblock %}